<template>
    <div v-show="route.path === '/movie'">
        <van-nav-bar title="电影" @click-left="goCity">
            <template #left>
                {{ store.state.city.name }}&nbsp;&nbsp;<img
                    src=""
                    alt="" style="width: 6px; height: 3px;">
            </template>
        </van-nav-bar>
    </div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router'
import store from '@/store'
// import Vue from 'vue';
import { Tab, Tabs } from 'vant';

import { createApp, onMounted } from 'vue';
const app = createApp();
const router = useRouter()
const route = useRoute()

app.use(Tab);
app.use(Tabs);

onMounted(() => {
    window.addEventListener('scroll', handleScroll);
})

let goCity = () => {
    router.push({ path: '/city' })
}
let getScroll = () => {
    return {
        left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
        top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
    };
}
let handleScroll = () => {
    if (route.path === '/movie' || route.path === '/cinema') {
        const scrollTop = getScroll().top;
        if (scrollTop >= 200) {
            document.querySelector('.van-nav-bar').style.position = 'fixed';
            document.querySelector('.van-nav-bar').style.top = '0';
        } else {
            document.querySelector('.van-nav-bar').style.position = 'static';
        }
    }
}

</script>

<style>
.van-nav-bar {
    width: 100%;
}
</style>
